<template>
  <div class="pay">
    <div class="selectorPay">
      <div class="closeIcon">
        <img src="../assets/images/close.png" class="auto-img" @click="close"/>
      </div>
      <div class="payText">请选择支付方式</div>
    </div>
    <div class="price">
      <div class="priceName">
        <div class="zn-name">瑞幸咖啡×{{num}}</div>
        <div class="price-count">¥{{price}}.00</div>
      </div>
    </div>
    <div class="payMode">
      <div class="payModeIcon">
        <img src="../assets/images/payIcon.png" class="auto-img" />
      </div>
      <div class="payModeText">微信支付</div>
    </div>
    <div class="btn">
      <van-button
        type="primary"
        size="large"
        color="#2BAB7B"
        :loading="loading"
        loading-type="spinner"
        :loading-text="payContent"
        @click="toggle"
        >确定支付</van-button
      >
    </div>
    <div class="input">
      <van-popup
        v-model="payFlag"
        round
        position="bottom"
        style="height: 46%; padding-top: 4px"
      >
        <!-- 密码输入框 -->
        <van-password-input
          :value="value"
          :length="6"
          :gutter="10"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
          v-model="value"
          :show="true"
        />
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  name: "payMent",
  data() {
    return {
      value: "",
      payFlag: false,
      loading:false,
      payContent:'支付中...'
    };
  },
  props:{
      num:{
          type:Number,
          default:0 
      },
      price:{
          type:Number,
          default:0
      }
  },
  watch: {
    value() {
      if (this.value.length == 6) {
        this.payFlag = false;
        this.loading=true;
        setTimeout(()=>{
             this.loading=false;
             this.$emit("toggle",false)
        },2000)
      }
    },
  },
  methods:{
      toggle(){
         this.payFlag=true;
      },
      close(){
           this.$emit("remove",false)
      }
  }
};
</script>
<style lang="less" scoped>
.pay {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  top: 0px;
  background-color: #fff;
  .selectorPay {
    display: flex;
    height: 50px;
    padding: 0px 20px;
    border-bottom: 1px solid #bebebe;
    align-items: center;
    .closeIcon {
      height: 25px;
      width: 25px;
    }
    .payText {
      width: 100%;
      font-size: 17px;
      text-align: center;
    }
  }
  .price {
    height: 120px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #bebebe;
    .priceName {
      .zn-name {
        font-size: 14px;
      }
      .price-count {
        font-size: 30px;
        margin-top: 10px;
        font-weight: bold;
      }
    }
  }
  .payMode {
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
    border-bottom: 1px solid #bebebe;
    .payModeIcon {
      height: 35px;
      width: 35px;
    }
    .payModeText {
      font-size: 16px;
      margin-left: 30px;
    }
  }
  .btn {
    height: 60px;
    line-height: 60px;
    padding: 0px 15px;
  }
  .input {
    position: absolute;
    width: 100%;
    top: 0px;
  }
  /deep/.van-password-input__item {
    background-color: #ededed;
  }
  /deep/ .van-password-input {
    display: flex;
    height: 70px;
    align-items: center;
  }
  /deep/ .van-password-input__item {
    height: 40px;
  }
  /deep/ .van-button--primary{
     top: 0px;
  }
}
</style>